{% extends "base.html" %}
{% load navigation_tags %}
{% load display_tags %}
{% load authorization_tags %}
{% block content %}
    {{ block.super }}
    <div class="row" xmlns="http://www.w3.org/1999/html">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        Engagements
                        <div class="dropdown pull-right">
                            <button id="show-filters" aria-label="Filters" data-toggle="collapse" data-target="#the-filters" class="btn btn-primary toggle-filters"> <i class="fa-solid fa-filter"></i> <i class="caret"></i> </button>
                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="is-filters panel-body collapse {% if filter_form.has_changed %}in{% endif %}">
                    {% include "dojo/filter_snippet.html" with form=filter_form %}
                </div>
            </div>
            {% if products %}

                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=products page_size=True %}
                </div>

                <div class="table-responsive panel panel-default">
                    <table id="engagements" class="tablesorter-bootstrap table table-condensed table-striped table-hover">
                        <thead>
                        <tr>
                            <th></th>
                            <th>{{ labels.ASSET_LABEL }}</th>
                            <th>{{ labels.ASSET_LABEL }}</th>
                            <th>Engagement Name</th>
                            {% if system_settings.enable_jira %}
                                <th>JIRA</th>
                            {% endif %}
                            <th>Status</th>
                            <th>Period</th>
                            <th>Lead</th>
                            <th>Tests</th>
                            <th>Engagement</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for p in products %}
                            {% for e in p.engagement_set.all %}
                                <tr>
                                    <td class="nowrap">
                                        <div class="align-top">
                                            <div class="dropdown">
                                                <a href="#" aria-label="More engagement options" class="dropdown-toggle pull-left" data-toggle="dropdown" id="dropdownMenuToggle" role="button">&nbsp;<i class="fa-solid fa-ellipsis-vertical"></i>&nbsp;</a>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuToggle" role="menu">
                                                    <li role="presentation">
                                                        <a class="" href="{% url 'view_engagement' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-rectangle-list"></i> View
                                                    </li>
                                                    {% if e|has_object_permission:"Engagement_Edit" %}
                                                    <li role="presentation">
                                                        <a class="" href="{% url 'edit_engagement' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-pen-to-square"></i> Edit
                                                        </a>
                                                    </li>
                                                    <li class="divider" role="separator"></li>
                                                    {% endif %}
                                                    {% if e|has_object_permission:"Test_Add" %}
                                                    <li role="presentation">
                                                        <a class="" href="{% url 'add_tests' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-plus"></i> Add Tests
                                                        </a>
                                                    </li>
                                                    {% endif %}
                                                    {% if e|has_object_permission:"Import_Scan_Result" %}
                                                    <li role="presentation">
                                                        <a class="" href="{% url 'import_scan_results' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-upload"></i> Import Scan Results
                                                        </a>
                                                    </li>
                                                    {% endif %}
                                                    <li class="divider" role="separator"></li>
                                                    <li role="presentation">
                                                        <a href="{% url 'engagement_open_findings' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-file-lines"></i> View Active Findings
                                                        </a>
                                                    </li>
                                                    <li role="presentation">
                                                        <a href="{% url 'engagement_verified_findings' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-file-lines"></i> View Active and Verified Findings
                                                        </a>
                                                    </li>
                                                    <li role="presentation">
                                                        <a href="{% url 'engagement_closed_findings' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-file-lines"></i> View Mitigated Findings
                                                        </a>
                                                    </li>
                                                    <li role="presentation">
                                                        <a href="{% url 'engagement_accepted_findings' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-file-lines"></i> View Accepted Findings
                                                        </a>
                                                    </li>
                                                    <li role="presentation">
                                                        <a href="{% url 'engagement_all_findings' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-file-lines"></i> View All Findings
                                                        </a>
                                                    </li>
                                                    <li class="divider" role="separator"></li>
                                                    <li role="presentation">
                                                        <a href="{% url 'engagement_report' e.id %}?title=&active=1&verified=1&false_p=2&duplicate=2">
                                                            <i class="fa-solid fa-file-lines"></i> Engagement Report
                                                        </a>
                                                    </li>
                                                    {% if e|has_object_permission:"Engagement_Delete" %}
                                                    <li class="divider" role="separator"></li>
                                                    <li>
                                                        <a class="text-danger" href="{% url 'delete_engagement' e.id %}" role="menuitem">
                                                            <i class="fa-solid fa-trash"></i> Delete Engagement
                                                        </a>
                                                    </li>
                                                    {% endif %}
                                                </ul>
                                                </li>
                                                </ul>
                                    </td>
                                    <td class="prod_name"><a href="{% url 'view_product' p.id %}">{{ p.name }}</a>
                                        {% include "dojo/snippets/tags.html" with tags=p.tags.all %}
                                    </td>
                                    <td class="prod_name">
                                        <a href="{% url 'product_type_metrics' p.prod_type.id %}">{{ p.prod_type.name }}</a>
                                    </td>
                                    <td>
                                        <a class="eng_link" href="{% url 'view_engagement' e.id %}">{% if e.name %}{{ e.name }}{% endif %}</a>
                                        {% include "dojo/snippets/tags.html" with tags=e.tags.all %}
                                        <br>
                                    </td>
                                    {% if system_settings.enable_jira %}
                                    <td class="text-center">
                                      {{ e|jira_project_tag }}
                                    </td>
                                    {% endif %}
                                    <td> {{ e.status }} </td>
                                    <td> {{ e.target_start }} - {{ e.target_end }}
                                        {% if e.is_overdue and e.active and e.status != 'Completed' %}
                                        <sup><div class="tag-label warning-color">{{ e.target_end|overdue }} overdue</div></sup>
                                        {% endif %}
                                    </td>
                                    <td> {{ e.lead.first_name }} {{ e.lead.last_name }}</td>
                                    <td>
                                        <a class="eng_link"
                                           href="{% url 'view_engagement' e.id %}#tests">
                                            {{ e.test_count }}
                                        </a>
                                    </td>
                                    <td>
                                        {% if p|has_object_permission:"Engagement_Add" %}
                                        <a class="btn btn-sm btn-success" href="{% url 'new_eng_for_prod' p.id %}">
                                                <i class="fa-solid fa-plus"></i> Add
                                        </a>
                                        {% endif %}
                                    </td>
                                </tr>

                            {% endfor %}
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=products page_size=True %}
                </div>
            {% else %}
            <div id="no_engagements"><h5 class="text-center"> No engagements found </h5></div>
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block postscript %}
    {{ block.super }}
    <script>
        $(function() {
            $('.table-responsive').on('shown.bs.dropdown', function(e) {
                var t = $(this),
                m = $(e.target).find('.dropdown-menu'),
                tb = t.offset().top + t.height(),
                mb = m.offset().top + m.outerHeight(true),
                d = 20; // Space for shadow + scrollbar.   
            if (t[0].scrollWidth > t.innerWidth()) {
                if (mb + d > tb) {
                    t.css('padding-bottom', ((mb + d) - tb));
                }
            } else {
                t.css('overflow', 'visible');
            }
            }).on('hidden.bs.dropdown', function() {
                $(this).css({
                    'padding-bottom': '',
                    'overflow': ''
                });
            });
        });
    </script>
    <script>
        $(function () {
            var availableTags = [
                {% for word in name_words %}
                    "{{word}}",
                {% endfor %}
            ];
            var engWords = [
                {% for word in eng_words %}
                    "{{word}}",
                {% endfor %}
            ];
            $("#id_name").autocomplete({
                source: availableTags
            });
            $("#id_engagement__name").autocomplete({
                source: engWords
            });
        });
    </script>
    <script>
        // DataTables setup
        $(document).ready(function() {
            date =  new Date().toISOString().slice(0, 10);
            var fileDated = 'Engagements_List_' + date;
            var buttonCommon = {
                exportOptions: {
                    columns: ':not(:eq(7))',
                    stripHtml: true,
                    stripNewlines: true,
                    trim: true,
                    orthogonal: 'export'
                },
                filename: fileDated,
                title: 'Engagements List'
            };

            // Mapping of table columns to objects for proper cleanup and data formatting
            {% if enable_table_filtering %}
                var dojoTable = $('#engagements').DataTable({
                    colReorder: true,
                    columnDefs: [
                        {
                            "orderable": false,
                            "targets": [0]
                        },
                    ],
                    dom: 'Bfrtip',
                    paging: false,
                    info: false,
                    buttons: [
                        {
                            extend: 'colvis',
                            columns: ':not(.noVis)'
                        },
                        $.extend( true, {}, buttonCommon, {
                            extend: 'copy'
                        }),
                        $.extend( true, {}, buttonCommon, {
                            extend: 'excel',
                            autoFilter: true,
                            sheetName: 'Exported data',
                        }),
                        $.extend( true, {}, buttonCommon, {
                            extend: 'csv'
                        }),
                        $.extend( true, {}, buttonCommon, {
                            extend: 'pdf',
                            orientation: 'landscape',
                            pageSize: 'LETTER'
                        }),
                        $.extend( true, {}, buttonCommon, {
                            extend: 'print'
                        }),
                    ],
                });
            {% endif %}
        });
    </script>
    {% include "dojo/filter_js_snippet.html" %}
{% endblock %}
